<template>
  <div>
    <div class="body-box">
      <el-form size="mini" label-width="100px" label-position="left">
        <el-form-item label="是否显示章程">
          <el-switch
            v-model="form.rules_show"
            active-color="#8a70c6"
            inactive-color="#e1e1e1"
            active-text="开启"
            inactive-text="关闭"
          ></el-switch>
        </el-form-item>
        <div v-if="form.rules_show">
          <quill-editor
            :options="editorOption"
            ref="myQuillEditor"
            @ready="onEditorReady($event)"
            v-model="form.rules"
            class="edit-itmess"
          ></quill-editor>
        </div>

        <el-form-item label="开启高级会员">
          <el-switch
            v-model="form.vip_open"
            active-color="#8a70c6"
            inactive-color="#e1e1e1"
            active-text="开启"
            inactive-text="关闭"
          ></el-switch>
        </el-form-item>
        <el-card v-if="form.vip_open" shadow="never" style="margin-bottom:20px;background:#f8f8f8">
          <el-form-item label="高级会员审核" >
            <el-switch
              v-model="form.vip_verify"
              active-color="#8a70c6"
              inactive-color="#e1e1e1"
              active-text="开启"
              inactive-text="关闭"
            ></el-switch>
          </el-form-item>
          <el-form-item label="高级会员金额">
            <el-input placeholder="请输入金额" v-model="form.vip_price" class="pay-price-input">
              <template slot="append">元/年</template>
            </el-input>
          </el-form-item>
        </el-card>
        <el-form-item label="会员人数上限">
          <el-input v-model="form.max_user" placeholder="输入0表示无限大" class="pay-price-input"></el-input>
          <span class="user-num-toast">输入0表示无上限</span>
        </el-form-item>
        <el-form-item label="会员权益">
          <el-input
            placeholder="请输入会员权益"
            v-model="form.inviol"
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 6}"
          ></el-input>
        </el-form-item>
        <el-form-item label="入会是否审核">
          <el-switch
            v-model="form.in_verify"
            active-color="#8a70c6"
            inactive-color="#e1e1e1"
            active-text="开启"
            inactive-text="关闭"
          ></el-switch>
        </el-form-item>
        <el-form-item label="入会填写表单" v-if="form.in_verify"></el-form-item>
        <div  v-if="form.in_verify">
          <set-form :form_data="form.in_form" @change="changeForms"></set-form>
        </div>
        
        <div style="margin-top:20px;">
          <el-button size="small" class="com-btn" icon="el-icon-check" @click="save()">保存信息</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import formItem from "../../components/unit/form.vue";
import quillConfig from "../../assets/js/quill-config.js";
import setForm from '../../components/unit/set-form.vue';

export default {
  components: { quillEditor, formItem , setForm },
  data() {
    return {
      form: {
        rules_show: false,
        rules: "",
        vip_open: false,
        vip_verify: false,
        vip_price: "",
        in_verify: false,
        inviol: "",
        max_user: 0,
        in_form: [
           {name : '姓名',is_diy:false,not_null:true,limit:false,select:false,type:'text',data:[],bind : false},
           {name : '手机号',is_diy:false,not_null:true,limit:false,select:false,type:'text',data:[],bind : false},
        ]
      },
      in_form : [],
      editorOption: quillConfig
    };
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    //form改变的时候
    changeForms(e){
      //this.form.in_form = e;
      this.in_form = e;
    },
    //获取页面加载数据
    getData() {
      this.ajaxs("user/getUserParam", {
        success: res => {
          this.form = res.msg;
        }
      });
    },
    //保存信息
    save() {
      this.form.in_form = this.in_form;
      this.ajaxs("user/saveUserParam", {
        data: this.form,
        success: res => {
          this.toast(res.code, res.msg);
        }
      });
      console.log(this.form);
    },
    onEditorReady(editor) {},
    
  }
};
</script>

<style>
.user-num-toast {
  color: #999;
  margin-left: 20px;
  font-size: 12px;
}
.pay-price {
  margin: 0 10px;
  margin-left: 40px;
}
.pay-price-input {
  width: 200px;
}
.form-select {
  position: relative;
  display: inline-block;
  height: 28px;
  line-height: 28px;
  padding: 0 10px;
  border: 1px solid #e1e1e1;
  margin-right: 5px;
  border-radius: 3px;
}
.form-select i {
  cursor: pointer;
  margin-left: 3px;
}
.form-select-add {
  float: left;
  margin-left: 5px;
}
.form-select-input {
  width: 120px;
  float: left;
  margin: 0 3px 3px 0;
}
.form-sort i {
  cursor: pointer;
}
.add-new-form {
  text-align: center;
  width: 200px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #e1e1e1;
  border-radius: 3px;
  margin: 10px auto;
  cursor: pointer;
}
.add-new-form i {
  margin-right: 5px;
}
.edit-itmess {
  height: 200px;
  margin-bottom: 100px;
}
</style>